<template>
    <div id="safe_audit">
        <p>页面数据的百分比:<el-progress :text-inside="true"  :stroke-width="24" :percentage="max" status="success"></el-progress></p>
        <el-table :data="arrList1" style="width: 100%">
            <el-table-column prop="storeId" label="配置单编号" width="150">
            </el-table-column>
            <el-table-column prop="productId" label="产品编号" width="150">
            </el-table-column>
            <el-table-column prop="productName" label="产品名称" width="150">
            </el-table-column>
            <el-table-column prop="firstKindName" label="I级分类" width="150">
            </el-table-column>
            <el-table-column prop="secondKindName" label="II级分类" width="150">
            </el-table-column>
            <el-table-column prop="thirdKindName" label="III级分类" width="150">
            </el-table-column>
            <el-table-column prop="registerTime" label="登记时间" width="200">
            </el-table-column>
            <!--操作列-->
            <el-table-column label="复合">
                <template slot-scope="scope">
                    <el-button size="mini" type="success" @click="edit(scope.$index, scope.row)" round>复合</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 复合 -->
        <el-dialog title="安全库存配置单" :visible.sync="dialogVisible" width="60%">

            <el-form :inline="true" :model="filebean" class="demo-form-inline">
                <el-form-item label="配置单编号">
                    <el-input v-model="filebean.storeId" placeholder="配置单编号"></el-input>
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-input v-model="filebean.productName" placeholder="产品名称"></el-input>
                </el-form-item>

                <el-form-item label="产品编号">
                    <el-input v-model="filebean.productId" placeholder="产品编号"></el-input>
                </el-form-item>

                <el-form-item label="库存报警下限数">
                    <el-input v-model="filebean.minAmount" placeholder="库存报警下限数"></el-input>
                </el-form-item>
                <el-form-item label="库存报警上限数">
                    <el-input v-model="filebean.maxAmount" placeholder="库存报警上限数"></el-input>
                </el-form-item>

                <el-form-item label="复合人">
                    <el-input v-model="filebean.checker" placeholder="复合人"></el-input>
                </el-form-item>
                 <el-form-item label="复合时间">
                    <el-input v-model="checkTime" class="demo-ruleForm" autocomplete="off" readonly></el-input>
                </el-form-item>

                <el-form-item label="配置要求">
                    <el-input v-model="filebean.config" placeholder="配置要求"></el-input>
                </el-form-item>

                <el-form-item label="最大储存量">
                    <el-input v-model="filebean.maxCapacityAmount" placeholder="最大储存量"></el-input>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="auditAdd">确 定</el-button>
            </span>
        </el-dialog>

        <!---分页组件-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="pageSizeList" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>


<script>
export default {
    data() {
        return {
            arrList1: [],
            // 当前页号
            currentPage: 1,
            // 当前页大小
            pageSize: 2,
            // 总记录数
            total: 0,
            // 页大小列表
            pageSizeList: [2, 5, 10, 20],
            dialogVisible: false,
            filebean: {},
            max:0,
            checkTime:""
        }
    },
    methods: {
        async list() {
            const { data: res } = await this.$http.post
                (`/StorageCell/show/${this.currentPage}/${this.pageSize}`)
            this.arrList1 = res.rows
            this.total = res.total
            let aaa=this.total/1
          if(aaa=="Infinity"){
           this.max=0
          }else{
            this.max=aaa
          }

        },
        async edit(index, row) {
            this.getdatatime()
            const { data: res } = await this.$http.post
                (`StorageCell/StorageCellID?id=${row.id}`)
            this.filebean = res
            this.dialogVisible = true
        },
        async auditAdd() {
            this.filebean.checkTime = this.checkTime
            const data = await this.$http.post
                (`/StorageCell/update`, this.filebean)
            if (data.status == 200) {
                this.dialogVisible = false
                this.list()
            }
        },
        getdatatime() {
            var dt = new Date();
            var y = dt.getFullYear();
            var m = (dt.getMonth() + 1).toString().padStart(2, '0');
            var d = dt.getDate().toString().padStart(2, '0');
            var hh = dt.getHours().toString().padStart(2, '0');
            var mm = dt.getMinutes().toString().padStart(2, '0');
            var ss = dt.getSeconds().toString().padStart(2, '0');
            this.checkTime = `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        },
        // 页大小改变
        handleSizeChange(val) {
            this.pageSize = val
            this.list()
        },
        // 页号改变
        handleCurrentChange(val) {
            this.currentPage = val
            // 重新查询
            this.list()
        },
    },
    created() {
        this.list()
    }
}
</script>

<style></style>